<!DOCTYPE html>
<html>

<head>
  <% include global/meta.html %>
    <% include global/top-css.html %>
      <title>yuscms</title>
</head>

<body>

  <main class="main" data-info="<%=admin.permission%>">
    <div class="ys-admin-pos c-a1a3aa">
      首页
      <span class="f-sum">></span>
      <span class="c-565b6d">广告管理</span>
      <span class="f-sum">></span>
      <span class="c-565b6d">新增</span>
    </div>

    <div class="ys-admin-tablist">
      <div class="ys-admin-tab-header row justify-content-b">
        <p class="f-14 c-565b6d pl-8 pt-6"></p>
      </div>

      <div class="mr-10 ml-10">
        <form @submit.prevent="checkForm" name="form">
          <ul class="overflow-h pb-20">
            <li class="row pd-10 f-14">
              <div class="col-hd">
                <label class="label">广&nbsp; 告&nbsp; 图</label>
              </div>

              <div class="col-10 row c-666">
                <img v-if="params.img" class="thumb" :src="params.img">
                <span class="ico-camera">
                  <input @change="sendThumb" type="file" name="img" id="thumb">
                </span>
              </div>
              <div class="col-ft col-16 c-999">
                (建议尺寸280X280,并且200k之内)
              </div>
            </li>
            <li class="row pd-10 f-14">
              <div class="col-hd">
                <label class="label">广告类型</label>
              </div>
              <div class="col-bd">
                <input type="radio" name="type" class="radio pos-r t-4 ml-5 mr-10" v-model="params.type" value="1" />首页广告
                <input type="radio" name="type" class="radio pos-r t-4 ml-5 mr-10" v-model="params.type" value="2" />列表广告
                <input type="radio" name="type" class="radio pos-r t-4 ml-5 mr-10" v-model="params.type" value="3" />文章广告
              </div>
            </li>

            <li class="row pd-10 f-14">
              <div class="col-hd">
                <label class="label">是否开启</label>
              </div>
              <div class="col-bd">
                <input type="radio" name="state" class="radio pos-r t-4 ml-5 mr-10" v-model="params.state" value="1" />开启
                <input type="radio" name="state" class="radio pos-r t-4 ml-5 mr-10" v-model="params.state" value="0" />关闭
              </div>
            </li>

            <li class="row pd-10 f-14">
              <div class="col-hd">
                <label class="label">广告标题</label>
              </div>
              <div class="col-10">
                <input type="text" name="title" v-model="params.title" class="input" value="" />
              </div>
            </li>

            <li class="row pd-10 f-14">
              <div class="col-hd">
                <label class="label">广告连接</label>
              </div>
              <div class="col-10">
                <input type="text" name="url" v-model="params.url" class="input" value="" />
              </div>
            </li>

            <li class="pd-10 mt-35">
              <div class="col-hd">
                &nbsp;&nbsp;&nbsp;&nbsp;
              </div>
              <div class="col-bd row ml-35">
                <input name="send" class="btn btn-sure ml-35" type="submit" value="确定发布" />
                <input name="send" class="btn btn-reset ml-35" type="reset" value="重置" />
              </div>
            </li>

          </ul>
        </form>
      </div>


    </div>

  </main>

  <% include global/all-js.html %>
    <script>
      var vm = new Vue({
        el: '.main',
        data: {
          params: {
            img: "",
            type: 1,
            state: 1,
            title: "",
            url: ""
          }
        },
        methods: {

          sendThumb: function () {
            var _this = this;

            var formData = new FormData();
            formData.append("file", $("#thumb")[0].files[0]);
            var thumb = $("#thumb")
              .val()
              .split(".")[1];

            if (
              thumb != "jpg" &&
              thumb != "gif" &&
              thumb != "jpeg" &&
              thumb != "png"
            ) {
              tipsWarn(_this, "请上传图片！");
              return false;
            }

            if ($("#thumb")[0].files[0].size / 1000 > 200) {
              tipsWarn(_this, "缩略图不能超过200k");
              return false;
            }

            let config = {
              headers: { "Content-Type": "multipart/form-data" }
            };

            axios
              .post("/api/admin/slide/upload", formData, config)
              .then(data => {
                let filterData = data.data;
                if (filterData.data) {
                  _this.params.img = filterData.data[0];
                } else {
                  tipsWarn(_this, filterData.msg);
                }
              })
              .catch(error => {
                console.error(error);
              });
          },

          adAdd() {
            let _this = this;
            axios
              .post("/api/admin/ad/add", _this.params)
              .then(data => {
                let filterData = data.data;
                if (filterData.data.affectedRows >= 1) {
                  tips(_this, "添加成功！");
                  _this.$router.go(-1);
                }
              })
              .catch(error => {
                console.error(error);
              });
          },

          checkForm: function () {
            var _this = this;
            if (!hasPermission("5")) {
              tipsWarn(_this, "对不起,您没有操作权限^_^");
              return;
            }
            var fm = document.form;

            var _this = this;

            if (_this.params.url.length == "") {
              tipsWarn(_this, "链接不得为空!^_^");
              fm.url.focus();
              return false;
            }

            if (_this.params.title.length > 20) {
              tipsWarn(_this, "标题不得大于20位!^_^");
              fm.title.focus();
              return false;
            }

            _this.adAdd();
          }
        },

        created: function () { },
        mounted: function () { }
      });
    </script>
</body>

</html>